<template>
  <div class="container">
    <div class="left">
      <div class="box">

        <div class="up">
          <div class="avator">
            <img src="https://inews.gtimg.com/newsapp_bt/0/14664865845/1000" alt="">
          </div>
          <div class="info">
            <span>张鹏老师</span>
            <span style="color: #909399;font-size: 12px">管理员</span>
            <el-button type="primary" @click="issue" style="width:100px;margin: 10px auto;">公布结果</el-button>
          </div>
        </div>
        <div class="down">
          <div class="title">
            正在进行中的比赛
          </div>
          <el-tag>{{ competition }}</el-tag>
        </div>


      </div>
    </div>

    <div class="right">
      <div class="card" @click="Go(1)">
        <div class="title">
          <div class="logo">
            <el-icon>
              <Download/>
            </el-icon>
          </div>

          <div class="name">
            下载作品
          </div>
        </div>
        <div class="desc">
          历届的挑战杯作品报名信息，以Excel形式呈现
        </div>

        <div class="btm">
          <el-icon>
            <Coin/>
          </el-icon>
          本届作品总数：100
        </div>
      </div>
      <div class="card" @click="Go(2)">
        <div class="title">
          <div class="logo" style="background-color: #f441a5">
            <el-icon><Select/></el-icon>
          </div>
          <div class="name">
            评委任命
          </div>
        </div>
        <div class="desc">
          校内外老师都可以任命为评委，最终结果以Excel形式展示
        </div>

        <div class="btm">
          <el-icon>
            <Coin/>
          </el-icon>
          评委总数：100
        </div>
      </div>
      <div class="card" @click="Go(3)">
        <div class="title">
          <div class="logo" style="background-color: #ffbc00">
            <el-icon>
              <Trophy/>
            </el-icon>
          </div>

          <div class="name">
            比赛安排
          </div>
        </div>
        <div class="desc">
          发布、删除比赛
        </div>

        <div class="btm">
          <el-icon>
            <Coin/>
          </el-icon>
          比赛总数：100
        </div>
      </div>
      <div class="card" @click="Go(4)">
        <div class="title">
          <div class="logo" style="background-color: darkcyan">
            <el-icon>
              <CollectionTag/>
            </el-icon>
          </div>

          <div class="name">
            发布通知
          </div>
        </div>
        <div class="desc">
          发布删除通知
        </div>

        <div class="btm">
          <el-icon>
            <Coin/>
          </el-icon>
          已发布通知总数：100
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {reactive, ref, inject, onMounted} from "vue";

const competition = ref("近期无比赛")
const axios = inject("$axios")
const router = useRouter()
const Go = (e) => {
  if (e == 3) router.push('/issueCompetition')
  if (e == 2) router.push('/setJudge/0')
  if (e == 1) router.push('/download')
  if (e == 4) router.push('/issueNotice')
}
const issue = () => {
  axios.get("sub/issue").then(res => {
    if (res.code == 1) {
      ElMessage({
        message: "公布成功",
        type: "success"
      })
    } else ElMessage({
      message: "还有作品未审核",
      type: "error"
    })
  })
}
onMounted(() => {
  axios.get("competition/check").then(res => {
    if (res.code == 1) {
      competition.value = res.data.name
    }
  })
})
</script>

<style scoped lang="less">
@media screen and(min-width: 480px) {
  .container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;

  .left {
    margin-top: 10px;
    margin-left: 20px;
    height: 500px;
    width: 200px;
    background-color: #ffffff;

    .box {
      width: 100%;

      .avator {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        margin: 20px auto;
        margin-top: 30px;


        img {
          width: 100%;
          height: 100%;
        }

      }

      .info {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        font-size: 14px;
        color: #606266;
      }


      .up {
        width: 100%;
        height: 180px;
        border-bottom: #E4E7ED 1px solid;
      }

      .down {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;

        .title {
          margin-bottom: 20px;
          font-size: 14px;
          font-weight: 700;
        }

        span {
          width: 100px;
          margin-bottom: 20px;
        }
      }
    }
  }

  .right {
    flex: 1;
    margin: 10px;
    margin-left: 30px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;

    .card {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 10px;
      width: 400px;
      height: 200px;
      margin-bottom: 20px;

      .title {
        display: flex;
        flex-direction: row;

        .logo {
          width: 30px;
          height: 30px;
          background-color: #409EFF;
          line-height: 30px;
          text-align: center;
          color: #ffffff;
          border-radius: 5px;
          margin-right: 10px;

        }

        .name {
          color: #303133;
          font-size: 14px;
          font-weight: 700;
        }

      }

      .desc {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: 100px;
        border-bottom: #EBEEF5 1px solid;

        font-size: 14px;
        color: #A8ABB2;
      }

      .btm {
        color: #909399;
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
}

}
@media screen and(max-width: 480px) {
  .container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .left {
    height: 300px;
    width: 97vw;
    margin:10px auto;
    background-color: #ffffff;

    .box {
      width: 100%;

      .avator {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        overflow: hidden;
        margin: 20px auto;
        margin-top: 30px;


        img {
          width: 100%;
          height: 100%;
        }

      }

      .info {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        font-size: 14px;
        color: #606266;
      }


      .up {
        width: 100%;
        height: 180px;
        border-bottom: #E4E7ED 1px solid;
      }

      .down {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;

        .title {
          margin-bottom: 20px;
          font-size: 14px;
          font-weight: 700;
        }

        span {
          width: 100px;
          margin-bottom: 20px;
        }
      }
    }
  }

  .right {
    width: 97vw;
    margin:10px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .card {
      background-color: #ffffff;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      width: 100%;
      height: 150px;
      margin-bottom: 20px;

      .title {
        display: flex;
        flex-direction: row;

        .logo {
          width: 30px;
          height: 30px;
          background-color: #409EFF;
          line-height: 30px;
          text-align: center;
          color: #ffffff;
          border-radius: 5px;
          margin-right: 10px;

        }

        .name {
          color: #303133;
          font-size: 14px;
          font-weight: 700;
        }

      }

      .desc {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        height: auto;
        border-bottom: #EBEEF5 1px solid;

        font-size: 14px;
        color: #A8ABB2;
      }

      .btm {
        color: #909399;
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }
}

}
</style>